<template>
    <div>
        <!-- 逐点巡检 -->
        <el-form :model="form" label-width="100px" size="small">
            <el-form-item label="规划模式" v-if="route.query.mode==0?true:false">
                <el-select v-model="form.mode" placeholder="请选择">
                    <el-option v-for="item in options"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="随飞随动" v-if="route.query.mode==0?true:false">
                <el-radio v-model="form.flyMove" :label="0">否</el-radio>
                <el-radio v-model="form.flyMove" :label="1">是</el-radio>
            </el-form-item>
            <el-form-item label="相机变倍" v-if="route.query.mode==0?true:false">
                <el-slider v-model="form.cameraZoom"
                        :max="100"
                        show-input>
                </el-slider>
            </el-form-item>
            <el-form-item label="云台俯仰角" v-if="route.query.mode==0?true:false">
                <el-slider v-model="form.platformPitch"
                        :min="-120"
                        :max="30"
                        :step="10"
                        show-input>
                </el-slider>
            </el-form-item>
            <el-form-item label="统一高度(m)">
                <el-slider v-model="form.height"
                           :max="500"
                           show-input>
                </el-slider>
            </el-form-item>
            <el-form-item label="统一速度(m/s)">
                <el-slider v-model="form.linesSpeedOption"
                           :max="30"
                           show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="相机类型">
                <el-select v-model="form.cameraType" placeholder="请选择" multiple>
                    <el-option v-for="item in cameraOptions"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"
                               multiple>
                    </el-option>
                </el-select>
            </el-form-item>

            <el-row type="flex" justify="center" style="margin-bottom: 10px" v-if="route.query.mode==1?true:false">
                <el-button size="small" @click="newArea2D">新建区域</el-button>
                <el-button size="small" @click="redrawArea2D">重绘区域</el-button>
                <el-button size="small" @click="editArea2D">编辑区域</el-button>
            </el-row>

            <el-row type="flex" justify="center" style="margin-bottom: 10px" v-if="route.query.mode==2?true:false">
                <el-button size="small" @click="new3DPlane">新建区域</el-button>
                <el-button size="small" @click="edit3DDraw">调整空中位置</el-button>
            </el-row>

            <el-row type="flex" justify="center" style="margin-bottom: 10px" v-if="route.query.mode==3?true:false">
                <el-button size="small" @click="newLines">新建线</el-button>
                <el-button size="small" @click="editLines">调整线</el-button>
            </el-row>

            <el-row type="flex" justify="center" style="margin-bottom: 10px" v-if="route.query.mode==4?true:false">
                <el-button size="small" @click="newBuilding">新建体</el-button>
                <el-button size="small" @click="editBuilding">调整体</el-button>
            </el-row>

             <el-form-item label="斜面高度" v-if="route.query.mode==2?true:false">
                <el-slider v-model="form.maxHeight"
                           :min="0"
                           :max="500"
                           :step="1"
                           show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="立体高度" v-if="route.query.mode==4?true:false">
                <el-slider v-model="form.prismHeight"
                           :min="0"
                           :max="500"
                           :step="1"
                           show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="沿线宽度" v-if="route.query.mode==3?true:false">
                <el-slider v-model="form.buffer"
                           :min="0"
                           :max="500"
                           :step="1"
                           show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="横向重叠度" v-if="route.query.mode==1 || route.query.mode==2 || route.query.mode==3">
                <el-slider v-model="form.overlapWidth"
                           :max="100"
                           :min="0"
                           :step="1"
                           show-input>
                </el-slider>
            </el-form-item>
            <el-form-item label="纵向重叠度" v-if="route.query.mode==1 || route.query.mode==2 || route.query.mode==3">
                <el-slider v-model="form.overlapHeight"
                           :max="100"
                           :min="0"
                           :step="1"
                           show-input>
                </el-slider>
            </el-form-item>

            <el-form-item label="几何体覆盖度" v-if="route.query.mode==4">
                <el-slider v-model="form.roundNum"
                           :max="100"
                           :min="1"
                           show-input>
                </el-slider>
            </el-form-item>
        </el-form>
                    <el-table v-if="route.query.mode==0?true:false"
                      :data="routePointData"
                      :row-style="{height: '76px'}"
                      style="width: 100%">
                <el-table-column prop="positionIndex"
                                 label="序号"
                                 sortable
                                 width="78"
                                 align="center">
                </el-table-column>
                <el-table-column prop="uavPosition.longitude"
                                 label="经度"
                                 width="86"
                                 align="center">
                    <template #default="scope">
                        <span>{{ scope.row.uav_lng.toFixed(5) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="uavPosition.latitude"
                                 label="纬度"
                                 width="75"
                                 align="center">
                    <template #default="scope">
                        <span>{{ scope.row.uav_lat.toFixed(5) }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center">
                    <template #header>
                        <el-button size="small" type="success" @click="addPOI">导入</el-button>
                    </template>
                    <template #default="scope">
                        <el-button type="text"
                                   size="small"
                                   @click="() => locate([scope.row.uav_lng,scope.row.uav_lat])">
                            查看
                        </el-button>
                        <span style="font-size:20px;"><i class="el-icon-caret-top" @click="moveBack(scope.row)" style="color: white; cursor: pointer"></i></span>
                        <span style="font-size:20px;"><i class="el-icon-caret-bottom" @click="moveForward(scope.row)" style="color: white; cursor: pointer"></i></span>
                    </template>
                </el-table-column>
            </el-table>
    </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted, onBeforeUnmount, getCurrentInstance, defineExpose } from 'vue'
import { useRoute } from 'vue-router'

// 获取当前实例和路由
const instance = getCurrentInstance()
const route = useRoute()

// 获取事件总线
const $bus = instance?.appContext.config.globalProperties.$bus

// 响应式数据
const form = reactive({
    mode: 0,        //逐点巡检的模式
    heightMode: 0,         // 是否统一高度，默认0：否
    height: 20,        // 统一高度
    linesSpeedOption: 8, // 航线速度
    flyMove: 0,         // 是否随飞随动，默认0：否
    cameraType: [2, 4],//相机类型，0广角，1变焦，2IR，3近红外，4可见光
    "platformPitch": -90,//云台俯仰角
    "cameraType": [2, 4],//相机类型，0广角，1变焦，2IR，3近红外，4可见光
    "cameraZoom": 1.0,//相机变倍数值，当cameraType=1时有效
    "overlapWidth": 15,//横向重叠度
    "overlapHeight": 15,//纵向重叠度（云台方位角方向）
    "maxHeight": 100,
    "prismHeight": 100,
    "buffer":100,
    "roundNum": 50,
})

// 初始化标志位
const isInitialized = ref(false)
const options = [
    {
        value: 0,
        label: '自动模式'
    }, 
    {
        value: 1,
        label: '手动模式'
    }, 
]

const cameraOptions = [
    {
        value: 0,
        label: '变焦'
    }, 
    {
        value: 1,
        label: '广角'
    }, 
    {
        value: 2,
        label: 'IR'
    }, 
    {
        value: 3,
        label: '近红外'
    }, 
    {
        value: 4,
        label: '可见光'
    }, 
]

const routePointData = ref([])
const hightLight = ref(null)

// 定义 emits
const emit = defineEmits(['drawArea', 'draw3DPlane', 'edit3DDraw', 'redrawArea', 'editArea', 'edit3DPlane', 'drawLine','editLine', 'editLineBuffer', 'editBuildingArea', 'drawBuildingArea'])

// 方法
const init = () => {
    const routeData = JSON.parse(route.query.data)
    for (let pointsData of routeData.display_wayline.fly_points) {
        routePointData.value.push(pointsData);
    }
    form.mode = routeData.wayline_folder.template_type
    form.height = Number(routeData.wayline_folder.global_height)
    form.linesSpeedOption = Number(routeData.wayline_folder.global_speed)
    form.flyMove = routeData.wayline_folder.shoot_type
    form.cameraZoom=1
    isInitialized.value = true;
    if (form.mode == 1 || form.mode == 2) {
        form.platformPitch=-90
        form.overlapHeight=routeData.wayline_folder.overlap_height
        form.overlapWidth=routeData.wayline_folder.overlap_width
        form.maxHeight=routeData.wayline_folder.maxHeight?routeData.wayline_folder.maxHeight : 120
    }
    else if(form.mode==3){
        form.buffer=routeData.wayline_folder.buffer
    }
    else if(form.mode==4){
        form.prismHeight=routeData.wayline_folder.prism_height?routeData.wayline_folder.prism_height : 120
        form.roundNum=routeData.wayline_folder.roundNum
    }
    
}

const newArea2D = () => {
    emit("drawArea");
}

const new3DPlane = () => {
    emit("draw3DPlane", form.maxHeight)
}

const edit3DDraw = () => {
    emit("edit3DDraw", form.maxHeight)
}

const redrawArea2D = () => {
    emit("redrawArea");
}

const newLines=()=>{
    emit("drawLine", form.buffer);
}

const newBuilding=()=>{
    emit("drawBuildingArea", form.prismHeight);
}

const editBuilding=()=>{
    emit("editBuildingArea", form.prismHeight);
}

const editLines=()=>{
    emit("editLine", form.buffer);
}

// 编辑沿线事件
const editArea2D = () => {
    emit("editArea");
}

//添加兴趣点
const addPOI = () => {
    $bus.$emit('openPoiList');
}

// 定位到该点
const locate = (position) => {
    window.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(Number(position[0]), Number(position[1]), 150.0)
    });
    if (hightLight.value !== null) {
        window.viewer.entities.remove(hightLight.value);
    }
    hightLight.value = window.viewer.entities.add({
        name: 'hightLight',
        layerId: 'hightLightLayer',
        position: Cesium.Cartesian3.fromDegrees(Number(position[0]), Number(position[1])),
        point: {
            pixelSize: 8,
            color: Cesium.Color.YELLOW,
            outlineColor: Cesium.Color.WHITE,
            outlineWidth: 2
        }
    });
}

//点顺序前移，联动修改RoutePlanPoints里的RecordList
const moveBack = (row) => {
    let index = -1;
    for (let i in routePointData.value) {
        if (routePointData.value[i].positionIndex == row.positionIndex) {
            index = i;
            break;
        }
    }
    if (index > -1) {
        let tempIndex = routePointData.value[index].positionIndex - 1;
        if (tempIndex > 0) {
            routePointData.value[index].positionIndex = tempIndex;
            for (let j in routePointData.value) {
                if (routePointData.value[j].positionIndex == tempIndex && j != index) {
                    routePointData.value[j].positionIndex = tempIndex + 1;
                    if (tempIndex > 0) {
                        //发送需要交换的点序号
                        $bus.$emit('refreshPointSeq', [tempIndex - 1, tempIndex]);
                        console.log("交换序号", tempIndex - 1, tempIndex);
                    }
                    break;
                } 
            }
        }  
    }    
}

//点顺序后移，联动修改RoutePlanPoints里的RecordList
const moveForward = (row) => {
    let index = -1;
    for (let i in routePointData.value) {
        if (routePointData.value[i].positionIndex == row.positionIndex) {
            index = i;
            break;
        }
    }
    if (index > -1) {
        let tempIndex = routePointData.value[index].positionIndex + 1;
        if (tempIndex < routePointData.value.length + 1) {
            routePointData.value[index].positionIndex = tempIndex;
            for (let j in routePointData.value) {
                if (routePointData.value[j].positionIndex == tempIndex && j != index) {
                    routePointData.value[j].positionIndex = tempIndex - 1;
                    if (tempIndex < routePointData.value.length + 1) {
                        //发送需要交换的点序号
                        $bus.$emit('refreshPointSeq', [tempIndex - 2, tempIndex - 1]);
                        console.log("交换序号", tempIndex - 2, tempIndex - 1);
                    }
                    break;
                }
            }
        }
    }
}

// 监听器
watch(form, (val) => {
    if (route.query.mode == 0) {
        $bus.$emit('getRoutePlanSetting', val)
    }
}, { deep: true })

watch(() => form.maxHeight, (val) => {
    if (isInitialized.value) {
        emit("edit3DPlane", val)
    }
},{
  immediate: false
})

watch(() => form.prismHeight, (val) => {
    if (isInitialized.value) {
        emit("editBuildingArea", val)
    }
},{
  immediate: false
})

watch(() => form.buffer, (val) => {
    if (isInitialized.value) {
        emit("editLineBuffer", val)
    }
},{
  immediate: false
})

// 生命周期钩子
onMounted(() => {
    init()
    // 发送当前逐点巡检的航线设置数据
    $bus.$emit('getRoutePlanSetting', form)
    //接收到RoutePlanPoints的点修改信息，联动修改点顺序表
    $bus.$on('delRouteSeqPoint', (recordIndex) => {
        routePointData.value.splice(recordIndex, 1);
    });
    $bus.$on('addRouteSeqPoint', (addPoint) => {
        routePointData.value.push({ 'positionIndex': addPoint.positionIndex, 'uavPosition': { 'longitude': addPoint.position.longitude, 'latitude': addPoint.position.latitude}});
    });
})

onBeforeUnmount(() => {
    // 清理工作
})

defineExpose({
    form,
})
</script>

<style lang="scss" scoped>
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: #fff0;
}

:deep(.el-table) {
  /* 表格字体颜色 */
  color: white;
  /* 表格边框颜色 */
  border: transparent;
  border-bottom: 0;

  /* 设置滚动条的样式 */
  ::-webkit-scrollbar {
    width: 5px;
    /*滚动条粗细*/
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #00d4ff;
  }
}

/*去掉滚动条竖线*/
:deep(.el-table--border::after),
:deep(.el-table--group::after),
:deep(.el-table::before) {
    background-color: transparent;
}

/*去掉滚动条剩余横线*/
:deep(.el-table--border th.gutter:last-of-type) {
  border-bottom: transparent;
}

/*最外层透明*/
:deep(.el-table),
:deep(.el-table__expanded-cell) {
  background-color: transparent;
}

/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  font-size: 12px;
  border: 0;
  height: 30px;
  line-height: 30px;
  background-color: transparent;
}

/* 删除表格下横线 */
:deep(.el-table::before) {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

/* 表格表头字体颜色 */
:deep(.el-table thead) {
  color: #00d4ff;
  font-weight: 500;
}

/*修改选中背景色*/
:deep(.el-table__body tr.current-row > td) {
  background-color: #00d4ff !important;
  color: #fff;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell) {
  background-color: #f5f7fa75;
}

</style>